<template>
	<view>
		<!--顶部标题部分 -->
		<view class="title">
				<view class="right" @click="flag = !flag">
					<text class="butt">{{ flag ? "编辑" : "取消" }}</text>
				</view>
		</view>
 
		<!-- 商品列表区域 -->
		<template>
			<view class="goods-Container" v-if="cartList.length!==0">
				<view class="goods-list d-flex" v-for="(item, index) in cartList" :key="item.id">
					<!-- 选中按钮区域-->
						<checkbox-group @change="changeitem(item)">
							<checkbox :value="item.id" :checked="item.checked"></checkbox>
						</checkbox-group>

					<!-- 商品图片及描述区域 -->
					<view class="d-flex j-center a-center">
						<image :src="item.goodsHeader" mode="" @click="detailGoods(item.goodsId)"></image>
						<view class="desc">
							<view class="goods-title">
								<text @click="detailGoods(item.goodsId)">{{ item.painterName }}: {{ item.goodsName }}</text>
							</view>
							<view class="goods-price">
								<text>￥{{ item.goodsPrice }}</text>
								<input class="numberInput" type="number" v-model="item.goodsNum">
								<text>{{ item.goodsUnit }}</text>
							</view>
						</view>
					</view>

				</view>
			</view>
			
			<view class="goods-Container" v-else>
			   购物车空空如也
			</view>
		</template>
 
		<!-- 底部全选合计价格区域 -->
		<view class="footer d-flex">
			<!-- 全选按钮-->
			<view class="radio-wrapper">
				<label class="checkbox_class">
					<checkbox-group @change="selectAll">
						<checkbox :checked="allChecked">全选</checkbox>
					</checkbox-group>
				</label>
			</view>
			<!-- 合计价格区域 -->
			<view class="footer-outer">
				<template v-if="flag">
					<view class="footer-main d-flex">
						<view class="footer-left"> 合计: <text class="totalPrice">{{totalPrice}}</text>元</view>
						<view class="footer-right" @click="settleItem"> 去结算 </view>
					</view>
				</template>
				<template v-if="flag == false">
					<view class="footer-main d-flex">
						<view class="footer-left" @click="colleItem"> 移入收藏 </view>
						<view class="footer-right" @click="delItem"> 删除 </view>
					</view>
				</template>
			</view>
		</view>
	
	<view class="bottom_foot"></view>
	<commonUserTabBar :currentTab="currentTab"></commonUserTabBar>
	</view>
</template>

<script>
import global from '@/global.js'

	export default {
		data() {
			return {
				//当前选项
				currentTab:'/pages/orderList/myCart',
				flag:true,
				cartList:[],
				empty: false, //空白页现实  true|false
				//购物车有无商品
				show: true,
				checkList: [], //选中值
				allChecked: false, //是否全选
			}
		},
		//计算总价
		computed: {
            totalPrice() {
				let totalPrice = 0
				this.cartList.map(item => {
					item.checked?totalPrice += item.goodsNum*item.goodsPrice:totalPrice+= 0
				})
				
				return totalPrice.toFixed(2); // 保留两位小数（否则会价格会出现多位小数）
			}
		},
		methods:{
		    //查询购物车
		    listCart() {
		    	var token = uni.getStorageSync("token")
		    	console.log("caches get  token value :  ", token)
		        uni.request({
		          url: global.baseUrl + 'api/cart/list', // 接口地址
		          method:'get',
		          dataType: "json",
		          header: {
		          	'X-Token': token
		          },
		    	  success: (res) => {
		    			if(res.data.code==0){
							console.log("request data :  ", res)
							this.cartList= res.data.data
		    	
		    			}else{
		    				console.log("request add cart result error: " ,res.data.code)
		    			} 
		          },
		          fail: (error) => {
		            console.log(error)
		          }
		        })
		    },
			// 全选
			selectAll() {
				this.allChecked = !this.allChecked
				if (this.allChecked) {
					this.cartList.map(item => {
						item.checked = true
					})
				} else {
					this.cartList.map(item => {
						item.checked = false
					})
				}
			},
			// 单选
			changeitem(item) {
				item.checked = !item.checked
				if (!item.checked) {
					this.allChecked = false
				} else {
					// 判断每一个商品是否是被选择的状态
					const cartList = this.checkList.every(item => {
				        return item.checked == true
					})
					
					if (cartList) {
						this.allChecked = true
					} else {
						this.allChecked = false
					}
				}
				
			},
			doDel(param, url ){
				var token = uni.getStorageSync("token")
				console.log("caches get  token value :  ", token)
				uni.request({
				  url: global.baseUrl + url, // 接口地址
				  method:'get',
				  dataType: "json",
				  data:{
					  ids: param
				  },
				  header: {
				  	'X-Token': token
				  },
				  success: (res) => {
						if(res.data.code==0){
							console.log("request data :  ", res)
				
						}else{
							console.log("request add cart result error: " ,res.data.code)
						} 
				  },
				  fail: (error) => {
				    console.log(error)
				  }
				})
			},
			// 删除
			delItem(context){
				let param=''
				
				this.cartList.map(item => {
					if(item.checked==true){
						//console.log("delItem checked data  :  {}, {}", item.id, item.checked)
					    param += item.id +","
					}
				})
				
				console.log("delete param  :  ",  param)
				this.doDel(param, "api/cart/detele")
			},
			//收藏
			colleItem(context){
				let param=''
				
				this.cartList.map(item => {
					if(item.checked==true){
						//console.log("colleItem checked data  :  {}, {}", item.id, item.checked)
					    param += item.id +","
					}
				})
				
				console.log("colleItem param  :  ",  param)
				this.doDel(param, "api/cart/collct")
			},
			// 去结算
			settleItem(context){
				let param=''
				
				this.cartList.map(item => {
				    if(item.checked==true){
						//console.log("settleItem checked data  :  {}, {}", item.id, item.checked)
					    param += item.id +","
					}
				})
				
				console.log("去结算 param data  :  ", param)
				uni.navigateTo({
				  url: '../orderList/orderVerify?flag=0&param=' + param,
				})
			},
			detailGoods(id){
				uni.reLaunch({url: '/pages/product/productDetail?id=' + id });
			}
	
		},
		onLoad() {
			this.listCart();
		}
	}
</script>

<style lang="scss">
	/* 顶部搜索栏区域样式设置 */
	.left {
		width: 44rpx;
		flex: 0 0 44px;
		align-items: center;
		text-align: center;
	}
 
	.center {
		flex: 1;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
	}
 
	.right {
		flex: 1;
		width: 100%;
		padding-top: 8px;
		height: 60rpx;
		text-align: right;
		margin-top: 6rpx;
		margin-right: 60rpx;
		background: #f8f8f8;
	}
 
	/* 商品列表区域样式设置 */
	.goods-Container {
		margin-top: 10rpx;
		padding: 0 30rpx;
		height: 800rpx;
	}
 
	.goods-list {
		height: 260rpx;
		line-height: 260rpx;
		margin-top: 10rpx;
		display: flex;
		justify-content: space-between;
		background-color: #f8f8f8;
	}
	
	.checkbox_class{
		width: 80rpx;
		height:80rpx;
	}
 
	.number {
		margin-top: 140rpx;
	}
 
	.desc {
		margin-left: 20rpx;
		width: 400rpx;
	}
	
	.j-center{
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
	}
	
	.a-center{
		margin-top: 20rpx;
	}
 
	.goods-title {
		line-height: 60rpx;
	}
 
	.goods-kind {
		line-height: 60rpx;
	}
 
	.goods-price {
		line-height: 60rpx;
		color: orange;
		font-size: 37rpx;
		display: flex;
		justify-content: space-between;
		margin-right: 30rpx;
	}
	
	.numberInput{
		flex: 1;
		text-align: right;
		margin-top: 10rpx;
		margin-right: 10rpx;
	}
	
	.butt{
		margin-right: 30rpx;
	}
 
	image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 15rpx;
		border: 0px solid rgb(239, 239, 239);
		padding-left: 10rpx;
	}
 
	/* 底部全选区域样式设置 */
	.footer {
		padding-left: 30rpx;
		height: 120rpx;
		line-height: 100rpx;
		margin-top: 100rpx;
	}
 
	.radio-wrapper {
		width: 50%;
	}
 
	.footer-outer {
		width: 85%;
	}
 
	.footer-left {
		width: 50%;
		text-align: center;
		background: orange;
		opacity: 0.7;
		font-size: 34rpx;
	}
 
	.footer-right {
		width: 50%;
		text-align: center;
		background: orange;
		font-size: 34rpx;
	}
 
	.totalPrice {
		margin: 0 10rpx;
		color: red;
		font-size: 36rpx;
	}
	
	.bottom_foot{
		height: 120rpx;
		margin-top: 200rpx;
	}
	
	.footer-main{
		display: flex;
		justify-content: space-between;
	}
	
</style>

